<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="UTF-8">
    <title>系统操作日志</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <link rel="stylesheet" href="/css/my_page.css">
  </head>
  
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a>
          <cite>系统操作记录</cite>
		</a>
      </span>
      <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
    </div>
    <div class="x-body" id="app">
      <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="searchForm">
			<div class="layui-input-inline">
			  <select name="type">
			    <option value="">操作模块</option>
			    <option value="0">管理员</option>
			    <option value="1">教师</option>
				<option value="2">学生</option>
			  </select>
			</div>
		  <input type="text" name="operator" lay-verify="operator"  placeholder="操作者" autocomplete="off" class="layui-input">
          <input type="text" name="oldValue" lay-verify="oldValue"  placeholder="操作前的值" autocomplete="off" class="layui-input">
		  <input type="text" name="newValue" lay-verify="newValue" placeholder="操作后的值" autocomplete="off" class="layui-input">
          <input class="layui-input" placeholder="开始时间" lay-verify="fromTime" name="fromTime" id="fromTime">
          <input class="layui-input" placeholder="结束时间" lay-verify="toTime" name="toTime" id="toTime">
          <button class="layui-btn"  lay-submit lay-filter="sreach" type="button"><i class="layui-icon">&#xe615;</i></button>
        </form>
      </div>
      <table class="layui-table">
        <thead>
          <tr>
            <th>操作者</th>
            <th>操作模块</th>
            <th>操作说明</th>
            <th>操作时间</th>
            <th>操作前的值</th>
            <th>操作后的值</th>
            </tr>
        </thead>
        <tbody>
          <tr v-for="sysLog in sysLogs">
            <td>{{ sysLog.operator }}</td>
            <td v-if="sysLog.type == 0">管理员</td>
            <td v-else-if="sysLog.type == 1">教师</td>
            <td v-else-if="sysLog.type == 2">学生</td>
            <td v-else>其它</td>
            <td>{{ sysLog.instruction }}</td>
            <td>{{ sysLog.operatorTime }}</td>
            <td>
				<textarea name="other" class="layui-textarea" :value="formatJson(sysLog.oldValue)"></textarea>
			</td>
            <td>
				<textarea name="other" class="layui-textarea" :value="formatJson(sysLog.newValue)"></textarea>
			</td>
          </tr>
        </tbody>
      </table>
	  <span class="x-left" style="line-height:20px">共有数据：{{ pageInfo.total }} 条，当前{{ pageInfo.pageNum }} / {{ pageInfo.pages }}页</span>
      <div class="page" style="margin-top: 10px !important;">
        <div>
          <a class="prev pageTxt" href="javascript:void(0)">上一页</a>
		  <a class="first pageTxt" href="javascript:void(0)">首页</a>
		  <template v-for="pageNum in pageInfo.navigatepageNums">
		      <a class="num" href="javascript:void(0)" v-if="pageInfo.pageNum != pageNum" :data="pageNum">{{ pageNum }}</a>
		      <span class="current" v-else :data="pageNum">{{ pageNum }}</span>
		  </template>
		  <a class="last pageTxt" href="javascript:void(0)">尾页</a>
          <a class="next pageTxt" href="javascript:void(0)">下一页</a>
        </div>
      </div>

    </div>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script src="/js/jquery.form.js"></script>
    <script src="/js/vue.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script>
	    var vm = new Vue({
	        el : '#app',
	        data : {
	            sysLogs : "",
	            pageInfo : "",
	            // 是否带有搜索参数
	            hasSearch:false
	        },
	        created : function() {
	            // 获取操作记录数据
	            this.listSysLog(1);
	        },
	        methods : {
	        	// 1.只带有页码的数据获取
	        	listSysLog : function(pageNum) {
	                var vm = this;
	                $.ajax({
	                    url : "/sys/log/listSysLog",
	                    type : "get",
	                    data : {
                            pageNum: pageNum
                        },
	                    success : function(result) {
	                        if (result.state) {
	                        	vm.sysLogs = result.data.list;
	                        	vm.pageInfo = result.data;
	                        } else {
	                        	layer.msg(""+result.msg, {icon: 5});
	                        }
	                    }
	                });
	            },
	            // 2.带有页码和搜索关键字的数据获取
	            listSysLogBySearch : function(pageNum) {
	            	var vm = this;
	            	$("#searchForm").ajaxSubmit({
	                    type:'post',
	                    url:'/sys/log/listSysLogBySearch',
	                    data : {
	                        pageNum: pageNum
	                    },
	                    success:function(result){
	                    	if (result.state) {
                                vm.sysLogs = result.data.list;
                                vm.pageInfo = result.data;
                            } else {
                                layer.msg(""+result.msg, {icon: 5});
                            }
	                    }
	                });
	            }
	        }
	    });
    
	    // 点击页码数，进行跳转
	    $(".page").delegate(".num", "click", function() {
	        var pageNum = $(this).attr("data");
	        if (!vm.hasSearch) {
	        	vm.listSysLog(pageNum);
	        } else {
	        	vm.listSysLogBySearch(pageNum);
	        }
	    });
	    // 上一页
	    $(".page").delegate(".prev", "click", function() {
	    	if (vm.pageInfo.hasPreviousPage) {
	    		if (!vm.hasSearch) {
	                vm.listSysLog(vm.pageInfo.pageNum - 1);
	            } else {
	                vm.listSysLogBySearch(vm.pageInfo.pageNum - 1);
	            }
	    	}
        });
	    // 下一页
        $(".page").delegate(".next", "click", function() {
            if (vm.pageInfo.hasNextPage) {
                if (!vm.hasSearch) {
                    vm.listSysLog(vm.pageInfo.pageNum + 1);
                } else {
                    vm.listSysLogBySearch(vm.pageInfo.pageNum + 1);
                }
            }
        });
        // 首页
        $(".page").delegate(".first", "click", function() {
            if (!vm.pageInfo.isFirstPage) {
                if (!vm.hasSearch) {
                    vm.listSysLog(1);
                } else {
                    vm.listSysLogBySearch(1);
                }
            }
        });
        // 尾页
        $(".page").delegate(".last", "click", function() {
            if (!vm.pageInfo.isLastPage) {
                if (!vm.hasSearch) {
                    vm.listSysLog(vm.pageInfo.pages);
                } else {
                    vm.listSysLogBySearch(vm.pageInfo.pages);
                }
            }
        });
	    
      layui.use(['form', 'laydate'], function(){
        var laydate = layui.laydate, form = layui.form;
		// 日期组件
        laydate.render({
          elem: '#fromTime' ,//指定元素
          type: 'datetime' // 日期时间选择，默认为date
        });
        laydate.render({
          elem: '#toTime' ,//指定元素
          type: 'datetime' // 日期时间选择，默认为date
        });
				
		form.verify({
			operator: [/^[\S]{0,20}$/,'0-20个字符，且不能出现空格'],
			oldValue: [/^[\S]{0,20}$/,'0-20个字符，且不能出现空格'],
			newValue: [/^[\S]{0,20}$/,'0-20个字符，且不能出现空格'],
			fromTime: function(value) {
				var fromDate = new Date(value);
				var nowDate = new Date();
				// 结束时间
				var toTime = $("#toTime").val();
				var toDate = new Date(toTime);
				if(fromDate > nowDate) {
					return "不能超过当前时间";
				} else if (toTime != "" && fromDate > toDate) {
					return "开始时间不能超过结束时间";
				}
			},
			toTime: function(value) {
				var date = new Date(value);
				var nowDate = new Date();
				if(date > nowDate) {
					return "不能超过当前时间";
				}
			}
		});
		
		//监听提交
		form.on('submit(sreach)', function(data){
			// 通过搜索关键字获取第一页的数据
			vm.listSysLogBySearch(1);
			vm.hasSearch = true;
		});
      });
      
      // String转换为优雅的Json格式
      var formatJson = function(json, options) {
          if(json == '') return '';
          var reg = null,
              formatted = '',
              pad = 0,
              PADDING = '    '; // one can also use '\t' or a different number of spaces

          // optional settings
          options = options || {};
          // remove newline where '{' or '[' follows ':'
          options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
          // use a space after a colon
          options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;

          // begin formatting...
          if (typeof json !== 'string') {
              // make sure we start with the JSON as a string
              json = JSON.stringify(json);
          } else {
              // is already a string, so parse and re-stringify in order to remove extra whitespace
              json = JSON.parse(json);
              json = JSON.stringify(json);
          }

          // add newline before and after curly braces
          reg = /([\{\}])/g;
          json = json.replace(reg, '\r\n$1\r\n');

          // add newline before and after square brackets
          reg = /([\[\]])/g;
          json = json.replace(reg, '\r\n$1\r\n');

          // add newline after comma
          reg = /(\,)/g;
          json = json.replace(reg, '$1\r\n');

          // remove multiple newlines
          reg = /(\r\n\r\n)/g;
          json = json.replace(reg, '\r\n');

          // remove newlines before commas
          reg = /\r\n\,/g;
          json = json.replace(reg, ',');

          // optional formatting...
          if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
              reg = /\:\r\n\{/g;
              json = json.replace(reg, ':{');
              reg = /\:\r\n\[/g;
              json = json.replace(reg, ':[');
          }
          if (options.spaceAfterColon) {
              reg = /\:/g;
              json = json.replace(reg, ': ');
          }

          $.each(json.split('\r\n'), function(index, node) {
              var i = 0,
                  indent = 0,
                  padding = '';

              if (node.match(/\{$/) || node.match(/\[$/)) {
                  indent = 1;
              } else if (node.match(/\}/) || node.match(/\]/)) {
                  if (pad !== 0) {
                      pad -= 1;
                  }
              } else {
                  indent = 0;
              }

              for (i = 0; i < pad; i++) {
                  padding += PADDING;
              }

              formatted += padding + node + '\r\n';
              pad += indent;
              });
              return formatted;
          };
    </script>
  </body>

</html>